<template>
<div id="app">
    <van-nav-bar
  title="我的收藏"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>
    <div class="houseList">
      <div
        class="house-list"
        v-for="item in houseList"
        :key="item.id"
        @click="$router.push(`/housedetail/?id=${item.houseCode}`)"
      >
        <div class="houseimg">
          <img :src="'http://124.223.73.204:8080' + item.houseImg" alt="" />
        </div>
        <div class="houseContent">
          <h3>{{ item.title }}</h3>
          <div class="houseitem-content">{{ item.desc }}</div>
          <span class="goods" v-for="item in item.tags" :key="item.id"
            >{{ item }}
          </span>
          <div class="house-price">
            <span>{{ item.price }}</span
            >元/月
          </div>
        </div>
      </div>
    </div>

</div>
</template>

<script>
import { LookFavoriteHouse } from '@/api-ajax/house'
export default {
  name: 'FavoriteHouse',
  data () {
    return {
      houseList: ''
    }
  },
  async created () {
    const { data } = await LookFavoriteHouse()
    console.log(data.body)
    this.houseList = data.body
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    }
  }
}
</script>

<style lang="less" scoped>
* {
    margin: 0;
    padding: 0;
}
::v-deep .van-nav-bar .van-icon  {
    color: #333;
  }
  ::v-deep .van-nav-bar__text {
    color: #333;

  }

.houseList {
  padding: 0 10px 10px;
  width: auto;
  max-width: 345px;
  overflow: hidden;
  position: relative;
  .house-list {
    height: 120px;
    left: 0px;
    // position: absolute;
    // top: 120px;
    width: 100%;
    padding-top: 18px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    .houseimg {
      width: 106px;
      height: 80px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .houseContent {
      flex: 1;
      overflow: hidden;
      line-height: 22px;
      padding-left: 12px;
      h3 {
        font-size: 16px;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
        font-size: 15px;
        color: #394043;
      }
      .houseitem-content {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
        font-size: 12px;
        color: #afb2b3;
      }
      .goods {
        color: #39becd;
        background: #e1f5f8;
        display: inline-block;
        font-size: 12px;
        border-radius: 3px;
        padding: 4px 5px;
        margin-right: 5px;
        line-height: 12px;
      }
      .house-price {
        font-size: 12px;
        color: #fa5741;
        span {
          font-size: 16px;
          font-weight: bolder;
        }
      }
    }
  }
}
</style>
